<template>
  <div>
    <!-- 筛选列表 -->
    <el-card style="margin-bottom: 20px" id="search">
      <div slot="header" class="clearfix">
        <span>筛选列表</span>
      </div>
      <div class="text item">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="90px"
          class="serach_contant"
        >
          <el-form-item label="考点：">
            <el-autocomplete
              v-model="queryParams.kaodian"
              size="small"
              :fetch-suggestions="SearchExamName"
              placeholder="搜索机房"
              @select="handleSelect"
              clearable
              @keyup.space.native="handleExamName(queryParams.kaodian)"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="机房：">
            <el-autocomplete
              v-model="queryParams.jifang"
              size="small"
              :fetch-suggestions="SearchExamRoom"
              placeholder="搜索机房"
              clearable
              @select="handleSelect"
              @keyup.space.native="handleExamRoom(queryParams.jifang)"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="科目：">
            <el-select
              v-model="queryParams.subject"
              placeholder="选择科目"
              clearable
              size="small"
              @focus="getSubject"
            >
              <el-option
                v-for="(item, index) in SubjectList"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="准考证：">
            <el-input
              v-model="queryParams.zkznum"
              placeholder="输入准考证"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="缺考状态：">
            <el-select
              v-model="queryParams.quekao"
              placeholder="筛选缺考状态"
              clearable
              size="small"
              @change="handleQuery"
            >
              <el-option
                v-for="(item, index) in quekaoStatusList"
                :key="index"
                :label="item.dictLabel"
                :value="Number(item.dictValue)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="离线状态：">
            <el-select
              v-model="queryParams.lixian"
              placeholder="筛选离线状态"
              clearable
              size="small"
              @change="handleQuery"
            >
              <el-option
                v-for="(item, index) in offLineStatusList"
                :key="index"
                :label="item.dictLabel"
                :value="Number(item.dictValue)"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 标签列表 -->
    <el-card>
      <!-- 批量管理    -->
      <div class="changeBtn">
        <el-button
          class="btnManage"
          type="primary"
          size="mini"
          style="float: right"
          @click="allMange"
          v-text="btnText"
        ></el-button>
        <el-button
          v-if="allManage"
          type="primary"
          size="mini"
          style="float: right; margin-right: 10px"
          @click="batchOffLine()"
          >标为离线</el-button
        >
      </div>
      <!--  Table-->
      <el-table
        v-loading="loading"
        :data="offLineList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column v-if="allManage" type="selection" align="center" />
        <el-table-column type="index" width="50" align="center" label="编号" />
        <el-table-column
          label="省份"
          align="center"
          prop="provinceName"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="考点"
          align="center"
          prop="examName"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="机房" align="center" prop="examRoomName" />
        <el-table-column label="姓名" align="center" prop="studentName" />
        <el-table-column label="准考证号" align="center" prop="zkzNum" />
        <el-table-column label="机号" align="center" prop="pcNo" />
        <el-table-column label="科目" align="center" prop="subjectName" />
        <el-table-column label="开考时间" align="center" prop="stuStartTime" />
        <el-table-column
          label="缺考状态"
          align="center"
          :formatter="quekaoStatusFormat"
        />
        <el-table-column
          label="离线状态"
          align="center"
          :formatter="offLineStatusFormat"
        />

        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.lixian == 0"
              id="btn1"
              ref="btn1"
              size="mini"
              type="text"
              icon="el-icon-folder-checked"
              class="btn_close"
              @click="
                openOffline(
                  scope.row.lixian,
                  scope.row.subjectName,
                  scope.row.zkzNum
                )
              "
              >标为离线
            </el-button>
            <el-button
              v-else
              id="btn2"
              ref="btn1"
              size="mini"
              type="text"
              icon="el-icon-folder-checked"
              class="btn_close"
              @click="closeOffline(scope.row.subjectName, scope.row.zkzNum)"
              >取消标记
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- page -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>
<script>
import {
  getJifang,
  getKaodian,
  getSubject,
  searchOffline,
  markOffline,
  cancelMarkOffline,
  markAll,
} from "@/api/toolsystem/answers";

export default {
  name: "offline",
  props: {
    quekaoStatusList: Array, //缺考状态
    offLineStatusList: Array, //离线状态
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      num_name: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      open: false,
      // list
      offLineList: [],
      // 考点
      jiFangLIst: [],
      timeout: null,
      state: "",
      kaodianLIst: [],
      // 筛选科目
      SubjectList: [],
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        kaodian: null,
        jifang: null,
        subject: null,
        zkznum: null,
        quekao: 1,
        lixian: null,
      },
      //显示批量管理
      allManage: false,
      btnText: "批量管理",
    };
  },
  created() {
    this.getList();
  },
  watch: {
    "queryParams.lixian"(val) {
      console.log(val);
    },
  },
  methods: {
    // 缺考状态字典翻译
    quekaoStatusFormat(row, column) {
      return this.selectDictLabel(this.quekaoStatusList, row.quekao);
    },
    // 离线状态字典翻译
    offLineStatusFormat(row, column) {
      return this.selectDictLabel(this.offLineStatusList, row.lixian);
    },
    // 考点,机房模糊搜索
    SearchExamName(queryString, cb) {
      var kaodianLIst = this.kaodianLIst;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(kaodianLIst);
      }, 3000 * Math.random());
    },
    SearchExamRoom(queryString, cb) {
      var jiFangLIst = this.jiFangLIst;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(jiFangLIst);
      }, 3000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    // 监听每次按下空格键模糊搜索考点，机房
    handleExamName(kaodian) {
      console.log(kaodian, "keyname");
      getKaodian(kaodian).then((res) => {
        // if (res.code != 200) {
        //   return this.msgError(res.msg);
        // }
        res.forEach((item) => {
          let obj = {
            value: item,
          };
          this.kaodianLIst.push(obj);
        });
      });
    },
    handleExamRoom(jifang) {
      console.log(jifang, "keyroom");
      getJifang(jifang).then((res) => {
        // if (res.code != 200) {
        //   return this.msgError(res.msg);
        // }
        res.forEach((item) => {
          let obj = {
            value: item,
          };
          this.jiFangLIst.push(obj);
        });
      });
    },

    /** 查询按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // console.log(this.queryParams, "11");
      this.getList();
    },

    /** 查询列表 */
    getList() {
      this.loading = true;
      // 获取列表
      searchOffline(this.queryParams)
        .then((res) => {
          if (res.code != 200) {
            this.loading = false;
            // return this.msgError(res.msg);
          }
          this.offLineList = res.rows;
          // console.log(this.offLineList);
          this.total = res.total;
          // console.log(res.total);
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
          // console.log(error);
        });
    },
    // 获取科目
    getSubject() {
      getSubject().then((res) => {
        this.SubjectList = res;
      });
    },

    //批量管理
    allMange() {
      this.allManage = !this.allManage;
      if (this.allManage == true) {
        this.btnText = "完成管理";
      } else if (this.allManage == false) {
        this.btnText = "批量管理";
      }
    },

    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection, "selection");
      let lixians = [];
      let num_name = [];
      selection.forEach((item) => {
        let it = {
          zkzNum: item.zkzNum,
          subjectName: item.subjectName,
        };
        lixians.push(item.lixian);
        num_name.push(it);
      });
      this.num_name = num_name;
      this.lixians = lixians;
      console.log(this.num_name);
      this.multiple = !selection.length;
    },

    //批量标为离线
    batchOffLine(lixians, num_name) {
      // console.log(num_name);
      if (this.num_name.length <= 0) {
        return this.msgInfo("请选择需要标记的选项");
      }
      if (this.lixians.indexOf(1) == -1) {
        let ss = [];
        ss = this.num_name;
        console.log(ss, "ss");
        markAll(ss).then((res) => {
          if (res.code != 200) {
            return this.msgInfo(res.code);
          }
          this.getList();
          return this.msgInfo(res.msg);
        });
      } else {
        return this.msgInfo("状态未离线的时候才可批量标记为离线");
      }
    },
    //  标记离线 取消离线
    openOffline(lixian, subjectName, zkzNum) {
      console.log(lixian);
      this.$confirm("是否标记为离线开考?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        markOffline(subjectName, zkzNum)
          .then((res) => {
            if (res.code != 200) {
              this.loading = false;
              return this.msgError(res.msg);
            }
            this.getList();
          })
          .catch((error) => {
            this.loading = false;
          });
      });
    },
    closeOffline(subjectName, zkzNum) {
      // console.log(row);
      this.$confirm("是否取消标记?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        cancelMarkOffline(subjectName, zkzNum)
          .then((res) => {
            if (res.code != 200) {
              this.loading = false;
              return this.msgError(res.msg);
            }
            this.getList();
            this.loading = false;
          })
          .catch((error) => {
            this.loading = false;
          });
      });
    },
  },
};
</script>
<style lang="scss">
@import "@/assets/styles/card.scss";
// bannerlist图标的大小
.aa {
  font-size: 20px;
}
.line {
  border-bottom: 1px solid #c0c4cc;
  padding: 20px 0;
}

h4 {
  // padding-bottom: 20px;
  margin: 0 !important;
}
span {
  font-size: 4px;
}
.flex {
  display: flex;
}

// search
#search .serach_contant {
  margin-top: 20px;
}
//批量管理
.allManage {
  justify-content: space-between;

  .btnManage {
    justify-content: flex-end;
  }
}
</style>
